<template>
	<view class="brandContainer">
		<view class="header">
			<icon type="clear" size="26" @click="close"/>
			<view>选择品牌</view>
		</view>
			<view class="mainList">
				<scroll-view  scroll-y="true" style="height:88vh" >
			<view class="item" @click="$emit('change',null)">不限</view>
			<view class="charItem" v-for="item in brandList" :key="item.char">
				<view :class="item.char " class="char" :ref="item.char">{{item.char}}</view>
				<view class="item" v-for="item1 in item.list" :key="item1.brandId"
				@click="getcol2List(item1.brandId)">{{item1.brandName}}</view>
			</view>
				 </scroll-view>
			<view class="indexBox">
			    <view v-for="item in charts" :key="item" :class="nowAc==item?'ac':''" @click="toChar(item)">{{item}}</view>
			</view>
	
		 </view>
		<uni-drawer  ref="drawer">
		    <view style="padding:30rpx;">				
					<scroll-view  scroll-y="true" style="height:100vh" >
					 <view class="item scroll-view-item" v-for="car in col2List" :key="car.value" @click="selectItemCol2(car)">{{car.label}}</view>
				 </scroll-view>
				
		    </view>
		</uni-drawer>
	</view>
	
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	 import pinyin4js from 'pinyin4js';
	export default {
		data() {
			return {
				brandList:[],
				open:false,
				col2List:[],
				charts:[],
				nowAc:'A'
			};
		},
		 components: {uniDrawer},
		created() {
			this.getCharList()
		},
		methods:{
			close(){
				this.$emit('exit')
			},
			getCharList(){
				this.myRequest({
					url:'/vehicle/getTopBrand',
					method:'POST'
				}).then(res=>{
					  this.brandList = res.data.data.filter(r=>r.list.length>0)
					this.charts=this.brandList.map(r=>r.char)
				})
			},
			getcol2List(id){
				this.$refs.drawer.open()
				this.myRequest({
					url:`/getBrand?pid=${id}&level=1`
				}).then(res=>{
					this.col2List=res.data.data
				})
			},
			toChar(item){
			  this.nowAc = item
			  // this.$refs.item.scrollIntoView();
			  document.getElementsByClassName(`${item}`)[0].scrollIntoView();
			},
			selectItemCol2(item){
				this.$emit('change',{brandId:item.value})
				// this.$store.commit('setBrand',item.value)
				// uni.switchTab({
				// 	url:"/pages/buyCar/buyCar"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.brandContainer{
	position: relative;
    .header{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		background: #efefef;
		color:#999;
		z-index: 10;
		// position: absolute;
		// top: -100rpx;
		// left: 0;
		// z-index: 999;
		icon{
			position: absolute;
			left: 40rpx;
		}
	}
	.mainList{
		padding-top: 100rpx;
		height:92vh;
		overflow: scroll;
		.char{
		  background: #efefef;
		  font-size: 34rpx;
		  line-height: 1.5;
		  padding-left: 30rpx;
		  color: #acacac;
		}
		.indexBox{
			position: fixed;
			right:10rpx;
			top:58%;
			transform: translateY(-50%);
			z-index: 999;
			view{
			  line-height: 2;
			  font-size: 24rpx;
			  padding-right: 20rpx;
			}
			.ac{
			  color:#ff4e00;
			}
		}
	}
	.item{
		padding-left: 35rpx;
		font-size: 36rpx;
		line-height: 2.5;
		
		height: 91rpx;
		border-bottom: 1rpx solid #d3d3d3;
		color:#666;
		overflow: hidden;
		
	}
}
</style>
